<template>
	<div class="new-top">
		<div id="Top">
			<div id="top-con">
				<div class="Logo clear">
					<img src="../assets/images/newTop/qycl_logo.png">
				</div>
				<div class="manager-tel"> </div>
				<div class="Logined clear">
					<img src="../assets/images/newTop/top_ico_1.png"> <span @click="logout">退出系统</span>
				</div>
				<div class="vertical-line"></div>

				<div class="UserInfo clear">
					<div class="user-img onehead">
						<li class="myli">
							<img class="starpic" src="../assets/images/newTop/star.png" alt="">
							<div class="one active">
								<img class="myhead" src="../assets/images/newTop/head.png" alt="">
							</div>
						</li>
						<div style="margin-top: -4px;" class="user-name">{{user.username}}</div>
					</div>

				</div>
			</div>
		</div>
		<div id="Navigation">
			<div class="w1200 clear" style="width:940px;">
				<div class="left">
					<template v-for="item in navList">
						<a class="nav-item" v-if="!item.selected" :href="baseUrl + item.href">{{item.name}}</a>
						<a class="nav-item selected-item" v-else>{{item.name}}</a>
					</template>
					
				</div>
				<div class="right">
					<div class="nav-right" style="width:116px;" :class="showTools?'hover':''">
						<div @click="showTools=!showTools" class="nav-right-inner flex flex-align-center flex-justify-center">
							<img src="../assets/images/newTop/tools.png" class="nav-icon"> 工具箱
							<span class="nav-arrow"></span>
						</div>
						<div v-if="showTools" class="nav-menu-list">
							<a style="text-align: left;" id="ringcamare" :href="baseUrl+'/companyringweb/goringlist'" class="nav-menu">铃音查询</a>
							<a style="text-align: left;" id="userinfo" :href="baseUrl+'/channel/companyringweb/zhonggao/list'" class="nav-menu">用户信息查询</a>
							<a style="text-align: left;" :href="baseUrl+'/companyringweb/ringselflist'" class="nav-menu">自有铃音内容库</a>
						</div>
					</div>
					<div class="nav-right" style="width:90px;">
						<a style="width:110px;" :href="baseUrl+'/companyringweb/postcircle/list'" class="nav-right-inner flex flex-align-center flex-justify-center">
							<img src="../assets/images/newTop/dx.png" class="nav-icon"> 电信提单
						</a>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import * as routes from '@/router/modules'
	import { baseUrl, setCookie, getCookie } from '@/utils/common'
	export default {
		name: 'NewTop',
		data() {
			return {
				baseUrl,
				showTools: false,
				menuList: [],
				navList:[],
				navList_: [{
					name: '集团管理',
					href: '/companyringweb/circle/index'
				}, {
					name: '渠道管理',
					href: '/companyringweb/user/index'
				}, {
					name: '号码管理',
					href: '/companyringweb/phonemanagerlist/index?type=3'
				}, {
					name: '数据统计',
					href: '/companyringweb/datasum/index'
				}, {
					name: '业务公告',
					href: '/companyringweb/businessnotice/index'
				}, {
					name: '宣传海报',
					href: 'javascript:void(0)',
					selected: true,
				}, ]
			}
		},
		watch: {
			"$route": {
				deep: true,
				immediate: true,
				handler() {
					var routeName = this.$route.name
					var producttype = 'home'
					for(var key in routes) {
						if(key != 'default') {
							checkProduct(routes[key])
						}
					}

					function checkProduct(list) {
						list.forEach((item) => {
							if(item.name == routeName) {
								producttype = key

							}
							if(item.children && item.children.length) {
								checkProduct(item.children)
							}
						})
					}
//					setCookie('producttype', producttype)
					sessionStorage.setItem('producttype', producttype)
					this.$store.commit('setProductType', producttype)
				}
			},
		},
		computed: {
			user() {
				return this.$store.state.user
			}
		},
		async mounted() {
			this.getMenuList()
		},
		methods: {
			logout: function() {
//				setCookie('producttype', '', -1)
				sessionStorage.removeItem('producttype')
				window.location.href = baseUrl + '/logout.do'
			},
			getMenuList() {
				this.$request.queryMenuInfo({
					productflag: sessionStorage.getItem('producttype')
				}).then(res => {
					if(res.code == 0) {
						var menuList = res.objlist ? res.objlist : []
						this.navList=this.navList_
						for(var i = 0; i < this.navList.length; i++) {
							var flag = false
							menuList.forEach(menu => {
								if(menu.menuName == this.navList[i].name) {
									flag = true
								}
							})

							if(!flag) {
								this.navList.splice(i, 1)
								i--
							}
						}
					}
				})
			},
		}
	}
</script>

<style scoped="">
	.new-top {
		position: fixed;
		width: 100%;
		left: 0;
		top: 0;
		z-index: 10;
	}
	
	#app {
		background: #fff;
	}
	
	#Top {
		height: 84px;
		width: 100%;
		background: url("../assets/images/newTop/qycl_top_bg.jpg") no-repeat center;
	}
	
	#top-con {
		width: 980px;
		height: 100%;
		margin: 0 auto;
		font-size: 18px;
		color: #fff;
	}
	
	.Logo {
		width: 307px;
		height: 46px;
		float: left;
	}
	
	.Logo img {
		padding-top: 15px;
	}
	
	.UserInfo {
		float: right;
		height: 100%;
	}
	
	.UserInfo div {
		float: left;
	}
	
	.user-img {
		width: 49px;
		height: 49px;
		border-radius: 100%;
		overflow: hidden;
		margin-top: 6px;
		margin-right: 10px;
	}
	
	.user-img img {
		height: 49px;
		margin: auto;
	}
	
	.user-name {
		height: 84px;
		line-height: 84px;
	}
	
	.Logined {
		float: right;
		cursor: pointer;
	}
	
	.Logined img {
		vertical-align: middle;
	}
	
	.Logined span {
		display: inline-block;
		vertical-align: middle;
		height: 84px;
		line-height: 84px;
	}
	
	.vertical-line {
		float: right;
		border-left: 1px solid #ffffff;
		height: 17px;
		margin: 35px 23px 0 23px;
	}
	
	.w950 {
		float: right;
		border: 1px solid red;
	}
	
	.onehead {
		width: 100%;
		display: flex;
		justify-content: flex-end;
		height: 82px;
	}
	
	.myli {
		position: relative;
		float: left;
		margin-top: 10px;
		margin-right: 5px;
		margin-left: 5px;
	}
	
	.myli .starpic {
		width: 14px;
		height: 13px;
		position: absolute;
		right: 12px;
		top: 0;
		z-index: 1;
	}
	
	.myli .one {
		position: relative;
		height: 48px;
		width: 48px;
		border-radius: 50%;
		overflow: hidden;
		margin: 0 auto;
	}
	
	.myli .one .myhead {
		width: 100%;
		height: 100%;
	}
	
	.onehead .myli {
		margin-right: 14px;
	}
	
	.onehead .starpic {
		right: 0;
	}
	
	#Navigation {
		height: 83px;
		width: 100%;
		background: #ffffff;
		box-shadow: 0 3px 6px #ccc;
	}
	
	#nav {
		width: 1024px;
		margin: auto;
		height: 100%;
		position: relative;
	}
	
	.nav-item {
		min-width: 48px;
		float: left;
		text-align: center;
		height: 83px;
		line-height: 83px;
		font-size: 18px;
		float: left;
		cursor: pointer;
		color: #333;
		margin-right: 40px;
	}
	
	.selected-item {
		color: rgb(23, 169, 255);
	}
	
	.nav-item:last-child {
		margin-right: 0px;
	}
	
	.nav-right {
		width: 136px;
		height: 83px;
		margin-left: 7px;
		color: #666;
		position: relative;
		cursor: pointer;
		float: left;
	}
	
	.nav-right-inner {
		width: 136px;
		height: 83px;
		font-size: 14px;
		color: #666;
	}
	
	.nav-icon {
		width: 20px;
		margin-right: 8px;
	}
	
	.nav-arrow {
		width: 0;
		height: 0;
		border-top: 6px solid #666;
		border-left: 6px solid transparent;
		border-right: 6px solid transparent;
		margin-left: 10px;
	}
	
	.nav-right.hover,
	.nav-right:hover,
	.nav-right a:hover,
	.nav-right:hover .nav-right-inner {
		color: #17A9FF;
		text-decoration: none;
	}
	
	.nav-right.hover .nav-arrow {
		border-top: none;
		border-bottom: 6px solid #17A9FF;
	}
	
	.menu-visible .nav-arrow {}
	
	.nav-menu-list {
		width: 136px;
		background: #FFFFFF;
		border: 1px solid #EEEEEE;
		box-shadow: 3px 3px 5px rgba(51, 51, 51, 0.2);
		position: absolute;
		left: 0;
		top: 64px;
		padding: 9px 11px;
		display: none;
	}
	
	.nav-right.hover .nav-menu-list {
		display: block;
	}
	
	.nav-menu {
		display: block;
		line-height: 36px;
		font-size: 14px;
		color: #333;
		text-decoration: none;
	}
	
	.nav-menu:hover {
		color: #17A9FF;
	}
</style>